import { nanoid } from 'nanoid';
import React from 'react'
import './index.css'

export default function Header({setTodoList,todoList}) {
    // 发布事件函数
    // console.log(setTodoList,todoList);
    const publishHandle=(e)=>{
        // console.log(e);
        // console.log(111);
        // 判断是否点击的是回车
        if(e.keyCode!==13) return;

        // 获取输入的内容，判断是否输入为空
        const pablishValue=e.target.value.trim();
       
        if(!pablishValue) return alert('请输入正确的内容')

        // 创建新的todo对象
        const newTodo={id:nanoid(),todo:pablishValue,done:false}
        // 调用父组件传递过来的改变todoList的方法 把newTodo添加进去
        setTodoList([newTodo,...todoList])

        // console.log(newTodo);
        // 清空输入框
        e.target.value=''
    }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
